
<template>
	<view class="contont">
		<!-- 顶部选项卡 -->
		<view :style="{paddingTop:statuHeight+'px'}" class="tabs-box">
			<ms-tabs :list="list" v-model="active" itemColor='#FFFFFF' lineColor='#FFFFFF'/>
		</view>
		<!-- 轮播图 -->
		<view class="main">
			<view class="banner">
				<view class="banner-box">
					<swiper autoplay :circular="true" indicator-dots indicator-color="#FFFFFF" indicator-active-color="#00C4FA"
					style="border-radius: 8px;overflow: hidden;" duration="400">
						<swiper-item v-for="(item,index) in swipers" :key="index">
							<image :src="item.imgUrl" class="bannerImg" mode="scaleToFill" style="border-radius: 8px;overflow: hidden;"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!--    猜你喜欢 -视频       -->
			<view class="two-guess-like-box">
				<view class="video-sort">
						<view class="small-video" >
							<view v-for="(item,i) in homeList" :key="item.id" class="video-alone">
								<view class="main-video">
									<image :src="item.url" mode="aspectFill"></image>
									<view class="vip-logo">免费</view>
								</view>
								<view class="newest"><text class="newest-ident">[最新] </text>{{item.text}}</view>
								<view class="many-see">
									<view>2.0 万人看过</view>
									<view>355</view>
								</view>
							</view>
						</view>
				</view>
			</view>
		</view>
		
		<!-- 底部导航 -->
		<tabber :tabIndex='1'></tabber>
	</view>
</template>

<script>
	import tabber from '@/components/tabbar.vue'
	import msTabs from '@/components/ms-tabs.vue'
	export default {
		components:{tabber,msTabs},
		data() {
			return {
				playStatus:true,
				videoplay:'', // 手动播放
				active: 0,
				statuHeight: uni.getSystemInfoSync().statusBarHeight,
				homeList: [
					{ id: 2, text:'这是一个影片的这是一个影片的这是一个影片的', url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'},
					{ id: 3, text:'这是一个影片的这是一个影片的这是一个影片的', url: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg'},
					{ id: 4, text:'这是一个影片的这是一个影片的这是一个影片的', url: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'},
					{ id: 5, text:'这是一个影片的这是一个影片的这是一个影片的', url: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'}
				],
				swipers:[
					{ imgUrl: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', id: 1 },
					{ imgUrl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', id: 2 },
					{ imgUrl: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', id: 3 },
					{ imgUrl: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg', id: 4 },
					{ imgUrl: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', id: 5 },
					{ imgUrl: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', id: 6 },
					{ imgUrl: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', id: 7 },
					{ imgUrl: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', id: 8 }
				],
				list:[
					{ title:'推荐', value: 1 }, { title:'日系频道', value: 2 }
				]
			}
		},
		onLoad() {
		
		},
		onShow() {
			// 隐藏官方tabber
			uni.hideTabBar()
		},
		mounted() {
			this.videoplay = wx.createVideoContext('myVideo')
		},
		methods: {
			// 手动播放
			videoPlay() {
				this.playStatus = !this.playStatus
				setTimeout(() => {
					this.videoplay.play()
				}, 200)
			},
			// 播放结束
			endedFun(e) {
				this.playStatus = !this.playStatus
			},
			pauseFun() {
				if(this.playStatus) {
					setTimeout(() => {
						this.videoplay.play()
						this.playStatus = !this.playStatus
					}, 200)
				}else{
					setTimeout(() => {
						this.videoplay.pause()
						this.playStatus = !this.playStatus
					}, 200)
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.contont{
		background-color: #F1F1F1;
		.tabs-box{
			display: flex;
			justify-content: space-around;
			align-items: center;
			background: #5B2177;
			ms-tabs{
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			/deep/ .tab__item {
				color: #F4F4F4 !important;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
			}
			/deep/ .tabBlock .tab__line {
				height: 6rpx !important;
				border-radius: 3rpx !important;
			}
			/deep/ .tab__item-title{
				margin: 0 30rpx !important;
			}
			/deep/ .tab__item--active{
				font-size: 36rpx;
				font-weight: bold;
				font-family: PingFang SC;
				color: #FFFFFF !important;
			}
		
		}
		.main{
			margin-bottom: 85px;
			// bannet图
			.banner{
				background: #fff;
				.banner-box{
					height: 340rpx;
					padding: 30rpx 24rpx 40rpx 24rpx;
					overflow: hidden;
					position: relative;
					/deep/ .wx-swiper-dots-horizontal{
						left: unset!important;
						right:-14rpx;
					}
					/deep/ .uni-swiper-dots-horizontal{
						left: unset!important;
						right:-14rpx;
					}
					swiper {
						width: 100%;
						height: 100%;
						display: block;
				
						.bannerImg {
							display: block;
							max-width: 100%;
							width: 100%;
							height: 100%;
							border-radius: 5px;
						}
					}
				}
			}
			//  列表二	猜你喜欢
			.two-guess-like-box{
				background-color: #FFFFFF;
				padding: 0 29rpx 49rpx 29rpx;
				margin-bottom: 10rpx;
		
				// 视频
				.video-sort{
						.small-video{
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							.video-alone:nth-child(2n) {
								margin-right: 0 !important;
							}
							.video-alone{
								width: 340rpx;
								// height: 280rpx;
								margin-right: 7px;
								.main-video{
									width: 339rpx;
									height: 192rpx;
									border-radius: 10rpx;
									position: relative;
									z-index: 9 !important;
									image{
										width: 100%;
										height: 100%;
										border-radius: 10rpx;
									}
									.vip-logo{
										position: absolute;
										left: 0;
										top: 0;
										width: 99rpx;
										height: 30rpx;
										background: #000000;
										// background: rgba(0,0,0,.36);
										opacity: 0.5;
										border-radius: 10rpx 0rpx 10rpx 0;
										text-align: center;
										line-height: 30rpx;
										font-size: 22rpx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #EDA424;
									}
								}
								.newest{
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #333333;
									margin-top:16rpx;
									// text-align: center;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 1;
									overflow: hidden;
									.newest-ident{
										color: #EE4242;
									}
								}
								.many-see{
									width: 100%;
									display: flex;
									justify-content: space-between;
									align-items: center;
									font-size: 20rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #666666;
									padding-bottom: 29rpx;
								}
							}
						}
				}
			}
		}
	}






</style>
